<template>
  <div class="app-container">
    <div class="app-card">

     <!-- 佣金统计卡片 -->
    <div class="app-card" style="margin-top: 20px;">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>总佣金</span>
            </div>
            <div class="card-body">
              <span class="card-amount">¥ {{ statistics.totalAmount || '0.00' }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>已结算佣金</span>
            </div>
            <div class="card-body">
              <span class="card-amount">¥ {{ statistics.settledAmount || '0.00' }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>未结算佣金</span>
            </div>
            <div class="card-body">
              <span class="card-amount">¥ {{ statistics.unsettledAmount || '0.00' }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>


      <div class="filter-container">
        <el-select v-model="listQuery.status" placeholder="结算状态" clearable style="width: 120px" class="filter-item">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input
          v-model="listQuery.orderNo"
          placeholder="订单编号"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          查询
        </el-button>
        <el-button class="filter-item" icon="el-icon-refresh" @click="resetFilter">
          重置
        </el-button>
      </div>

      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="订单编号" align="center" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.orderNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="佣金金额" align="center" width="300">
          <template slot-scope="scope">
            <span>¥ {{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结算状态" align="center" width="300">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">
              {{ scope.row.status | statusTextFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="380">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" v-show="total > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 佣金详情对话框 -->
    <el-dialog title="佣金详情" :visible.sync="dialogVisible" width="50%">
      <div v-loading="detailLoading">
        <el-descriptions title="佣金信息" :column="2" border>
          <el-descriptions-item label="订单编号">{{ commissionDetail.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="佣金金额">¥ {{ commissionDetail.amount }}</el-descriptions-item>
          <el-descriptions-item label="结算状态">
            <el-tag :type="commissionDetail.status | statusFilter">
              {{ commissionDetail.status | statusTextFilter }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ commissionDetail.createTime }}</el-descriptions-item>
          <el-descriptions-item label="结算时间" v-if="commissionDetail.status === 1">{{ commissionDetail.updateTime }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="订单信息" :column="2" border style="margin-top: 20px" v-if="orderDetail">
          <el-descriptions-item label="订单总金额">¥ {{ orderDetail.totalAmount }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getOrderStatusType(orderDetail.status)">
              {{ getOrderStatusText(orderDetail.status) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCommissions } from '@/api/commission'
import { getLeaderCommissionDetail } from '@/api/leader'
import { getOrder } from '@/api/order'

export default {
  name: 'LeaderCommission',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'warning',
        1: 'success'
      }
      return statusMap[status]
    },
    statusTextFilter(status) {
      const statusMap = {
        0: '未结算',
        1: '已结算'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        leaderId: null,
        orderNo: null,
        status: null
      },
      statusOptions: [
        { label: '未结算', value: 0 },
        { label: '已结算', value: 1 }
      ],
      statistics: {
        totalAmount: '0.00',
        settledAmount: '0.00',
        unsettledAmount: '0.00'
      },
      leaderId: null,
      dialogVisible: false,
      detailLoading: false,
      commissionDetail: {},
      orderDetail: null
    }
  },
  created() {
    this.leaderId = Number(localStorage.getItem('leaderId'))
    this.listQuery.leaderId = this.leaderId
    this.getList()
    this.getCommissionDetail()
  },
  methods: {
    getList() {
      this.listLoading = true
      listCommissions(this.listQuery).then(response => {
        // 根据后端返回的数据结构调整
        if (response && response.list) {
          this.list = response.list
          this.total = response.total
        } else if (response && response.records) {
          this.list = response.records
          this.total = response.total
        } else if (Array.isArray(response)) {
          this.list = response
          this.total = response.length
        } else {
          this.list = []
          this.total = 0
        }
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    getCommissionDetail() {
      getLeaderCommissionDetail(this.leaderId).then(response => {
        if (response && response.statistics) {
          this.statistics = {
            totalAmount: response.statistics.totalAmount || '0.00',
            settledAmount: response.statistics.settledAmount || '0.00',
            unsettledAmount: response.statistics.unsettledAmount || '0.00'
          }
        }
      }).catch(() => {
        // 如果API调用失败，保持默认值
        console.error('获取佣金详情失败')
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    resetFilter() {
      this.listQuery.orderNo = ''
      this.listQuery.status = null
      this.listQuery.current = 1
      this.getList()
    },
    handleDetail(row) {
      this.dialogVisible = true
      this.detailLoading = true
      this.commissionDetail = { ...row }
      
      // 获取关联订单详情
      getOrder(row.orderId).then(response => {
        if (response && response.order) {
          this.orderDetail = response.order
        } else {
          this.orderDetail = null
        }
        this.detailLoading = false
      }).catch(() => {
        this.orderDetail = null
        this.detailLoading = false
      })
    },
    getOrderStatusText(status) {
      const statusMap = {
        0: '待处理',
        1: '已处理',
        2: '配送中',
        3: '已完成',
        4: '已取消'
      }
      return statusMap[status] || '未知'
    },
    getOrderStatusType(status) {
      const typeMap = {
        0: 'info',
        1: 'primary',
        2: 'warning',
        3: 'success',
        4: 'danger'
      }
      return typeMap[status] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  padding-bottom: 10px;
  .filter-item {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.pagination-container {
  padding: 32px 16px;
}

.card-body {
  text-align: center;
  padding: 10px 0;
  
  .card-amount {
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;
  }
}
</style> 